<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>分配班级</title>
	<link rel="stylesheet" href="/css/common2.css">
	<link rel="stylesheet" href="/css/popup.css">
	<link rel="stylesheet" href="/scriptZIP/vue-select.min.css">
	<style>
		.table {
			width: 100%;
			margin-left: 0;
		}

		.three {
			min-width: 100px;
			width: 9%;
		}

		.long-background-img {
			width: 120px;
			height: 35px;
			background: url("../image/enter_longer.png") no-repeat center center !important;
		}
		.popup {
			width: 330px;
			height: 300px;
		
		}
		.popup-title {
			padding-left: 100px;
		}

		.relatives-info {
			display: inline-block;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			vertical-align: text-top;
			text-align: left;
		}

		.uihf {
			display: flex;
		}

		.search {
			position: relative;
			right: 0px;
			margin: 5px 10px 0 0;
		}

		[v-if] {
			display: none;
		}
		button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 14px;
    border: none;
    background: #69bbf4;
    color: white;
    border-radius: 4px;
    cursor: pointer;
}
	</style>
</head>

<body>
	<div id="vue-root" style="margin-top: 30px;">
		<div class="filter-container">
			<div class="refresh" onclick="location.reload()">刷新</div>
			<div class="uihf">
				<input placeholder="请输入学生姓名" class="search" v-model="search.name" @keyup.enter="getData0"
					style=" width: 120px; height: 33px;">
				<img src="../image/search.png" height="35" width="35" class="search_img" @click="getData0" />
			</div>
		</div>
		<form enctype="multipart/form-data" id="form" ref="form" style="display: none;">
			<input type="file" name="file" id="file" @change="importExcel" ref="file"
				accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
		</form>
		<div class="table " style="margin-left: 2%;width: 96%; overflow: auto;">
			<table class="table_top">
				<thead>
					<tr>
						<th class="one">
							<input type="checkbox" class="check-box" v-model="all">
						</th>
						<th class="one">序号</th>
						<th class="one">校区</th>
						<th class="three">学员姓名</th>
						<th class="one">报读课程</th>
						<th class="one">分配班级</th>
					</tr>
				</thead>
				<tbody id="list">
					<tr v-for="(student,index) in list" :key="student.id">
						<td>
							<input type="checkbox" class="check-box" v-model="student.checked">
						</td>
						<td class="one"><span v-text="index+1"></span></td>
						<td class="one" v-text="student.schoolName"></td>
                        <td class="one" v-text="student.studentName"></td>
                        <td class="one" v-text="student.courseName"></td>
                        <td class="one" v-text="student.classesName"></td>
				</tbody>
			</table>
		</div>
		<br>
		<div v-if="able.edit" class="delete long-background-img" @click="changeClasses">批量分配班级</div>
		<ul class="pagination" v-if="pages>1">
			<li>
				<a v-if="pageNum!=1" @click="pageNum=1">«</a>
				<a class="pages-jump" v-if="pageNum!=1" @click="pageNum--">‹</a>
				<a v-text="pageNum"></a>
				<a class="pages-jump" v-if="pageNum!=pages" @click="pageNum++">›</a>
				<a v-if="pageNum!=pages" @click="pageNum=pages">»</a>
			</li>
			<li>
				<a v-text="pages"></a>
			</li>
		</ul>
		<div style="float: right;">
			总共{{total}}条记录
			<select class="ui-select init" style="height:32px" v-model="pageSize">
				<option :value="10">每页10条</option>
				<option :value="30">每页30条</option>
				<option :value="100">每页100条</option>
			</select>
		</div>
		<!--遮罩层-->
		<div v-if="popup">
			<div class="model-table5">
				<div class="popup">
					<div class="popup-title">选择分配班级</div>
					<div class="popup-center">
						<v-select placeholder="请选择班级" label="name" :options="peoples" :reduce="item=>item.id"
							v-model="classesId"></v-select>
						<button class="sure" @click="sure">确定</button>
						<button class="back" @click="popup=false">取消</button>
					</div>
				</div>
			</div>
		</div>

	</div>
	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/scriptZIP/vue-select.min.js"></script>

	<script src="/lib/laydate/laydate.js"></script>
	<script src="/js/common.js"></script>
	<script src="/js/list.js"></script>
	<script src="/js/auth_util.js"></script>

	<script>
        var agentId=localStorage.getItem('agentId')
		var schoolId=top_params().id;
		Vue.component('v-select', VueSelect.VueSelect);
		var app = new Vue(merge({
			data: {
				schools: [],
				promoters:[],
				peoples:[],
				urls: {
					del: '/pc/student/del'
				},
				important: {
					content: '',
					date: '',

				},
				popup: false,
				classesId: null,
				boundShow: false,
				shownStudent: null,
				isModalVisible: false,
				isFollowUpModalVisible: false,
				studentBy: '',
				imps:[],

			},
			created: function () {
				abled('grade', this);
				var id = top_params().id;
				if (!id) return;
				this.schoolId = id
				this.urls.list = '/pc/enrollment/getAssignClass?schoolId=' + id;
			
				this.getData();
				
				axios.get('/pc/classes/all/' + id).then(function (res) {
					this.peoples = res.data;
				}.bind(this));

			

			},

			methods: {
				changeClasses: function () {
					if (this.checkedIds.length === 0) {
						alert('请选择至少1个');
						return;
					}
					this.popup = true;
				},
				sure: function () {
					if (!this.classesId) {
						alert('请选择班级');
						return;
					}

					axios.put('/pc/enrollment/classes/' + this.classesId, this.checkedIds).then(function (res) {
						this.getData();
						this.popup = false;
						alert('分配成功');
					}.bind(this));
				}
			},
			

		}));
	</script>

</body>

</html>